<!DOCTYPE html>
<html>
<head>
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
        }
        body {
            padding: 20px;
        }
        .students {
            margin: 0;
            padding: 0 0 20px 0;
            list-style: none;
        }
        .students > li {
            padding: 20px;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <ul class="students">
        <li v-for="student in students">
            <h3 class="name">
                {{student.name}}
                <span>{{student.age}}</span>
            </h3>
            <p v-if="Number(student.age) > 18">{{student.profile}}</p>
            <button v-on:click="sayHi(student.name)">Say hi</button>
        </li>
    </ul>
</div>
</body>
<script>
    var students = [
        {
            name: 'Susan',
            age: 17,
            profile: 'Hi there I\'m a dog! Wang Wang!'
        },
        {
            name: 'Amanda',
            age: 21,
            profile: 'Kneel Down, Human! Miao~'
        },
        {
            name: 'Lench',
            age: 25,
            profile: 'боевой народ!!'
        }
    ]
    new Vue({
        el: '#app',
        data: {
            students
        },
        methods: {
            sayHi (name) {
                window.alert('Hi '+ name)
            }
        }
    })
</script>
</html>